'use client'
import React, { useState } from 'react'
import MyTags from '@/app/component/my-tags'

const page = () => {
  const [value1, setValue1] = useState<{label: string, value: string}[]>([
    {label: 'Audi', value: 'audi'},
    {label: 'BMW', value: 'bmw'},
    {label: 'Toyota', value: 'toyota'},
  ])
  const [value2, setValue2] = useState<{label: string, value: number}[]>([
    {label: 'Audi', value: 1},
    {label: 'BMW', value: 2},
    {label: 'Toyota', value: 3},
  ])
  return (
    <div className='max-w-[800px] mx-auto'>
      <ul>
        <li>
          <h2>string</h2>
          {JSON.stringify(value1)}
          <MyTags prefix={'Brand'} value={value1} onChange={setValue1} deletable={true} />
        </li>
        <li>
          <h2>number</h2>
          {JSON.stringify(value2)}
          <MyTags suffix={'Brand'} value={value2} onChange={setValue2} deletable={true} number />
        </li>
      </ul>
    </div>
  )
}

export default page
